对象的解构赋值

1.概念

在ES6中，按照一定模式从数组和对象中提取值，然后对变量赋值，被称为解构赋值

2.数组的解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

如果模式不匹配，解构不成功，变量的值就为 undefined

let [a, b, c, d] = [1, 2, 3];
console.log(d); // undefined

解构赋值允许指定默认值

let [a, b, c, d = 4] = [1, 2, 3];
console.log(d); // 4

如果对应位置有值，则默认值无效

let [a, b, c, d = 4] = [1, 2, 3, 5];
console.log(d); // 5

3.对象的解构赋值

let {name: name, age: age} = {name: 'zs', age: 20};
console.log(name); // zs
console.log(age);  // 20

对象的结构赋值前面代表属性，后面代表变量

即上述代码也可以改为

let {name: _name, age: _age} = {name: 'zs', age: 20};
console.log(_name); // zs
console.log(_age);  // 20

当变量名和属性名相同时，可以省略变量名，即上述代码也可以改为

let {name, age} = {name: 'zs', age: 20};

当变量名和属性名不同时

let {name:name1, age:age1} = {name: 'zs', age: 20};
console.log(name1); // zs
console.log(age1);  // 20

对象解构赋值的内部机制：先找到同名属性，然后再赋值给对应的变量

4.字符串的解构赋值

字符串解构赋值时，是将字符串转换成一个类数组对象

let [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

类数组对象拥有 length 属性，因此也可以对 length 属性进行解构赋值

let {length:len} = 'hello';
console.log(len); // 5

5.数值和布尔值的解构赋值

数值和布尔值解构赋值时，会先转换成对象

let {toString:s1} = 666;
let {toString:s2} = true;

解构赋值的规则，如果等号右边的值不是数组或对象，就先将其转换成对象，null 和 undefined 无法转换成对象，所以对它们解构赋值会报错

6.函数参数的解构赋值

function add ([x,y]){
    return x+y;
}
add([1,2])  // 3

7.变量解构赋值的用途

1. 交换两个变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1 

2. 从函数中返回多个值

// 返回数组
function example(){
    return [1,2,3];
}
let [a,b,c]=example();
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 返回对象
function example(){
    return {
        foo:1,
        bar:2
    }
}
let {foo, bar}=example();
console.log(foo); // 1
console.log(bar); // 2

3. 定义函数参数的默认值
4. 遍历 Map，Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值都非常方便

var map = new Map()
map.set("first",'hello')
map.set("second",'world')

for (const [key,value] of map) {
    console.log(key + "is" +value)
}

// first is hello
// second is world

// 只想获取键名
for (const [key] of map) {
    //
}
// 只想获取键值
for (const [,value] of map) {
    //
}

5. 引入模块中的某些方法

const {resolve} = require('path')